<template>
  <MTable
    :column="column"
    :data="data"
    :total="100"
    :pageSize="50"
    :currentPage="1"
    :pageConfig="{ layout: 'prev,next', nextText: '下一页', prevText: '上一页' }"
  />
  <ElButton @click="formData.date = '2025-09-09'">asdfasdf</ElButton>
  <MSearchForm v-model:data="formData" :list="searchList" :config="{}" @search="search"> </MSearchForm>
  <el-button v-for="i in formData.date" :key="i">{{ i }}</el-button>
  <MForm
    theme="theme1"
    :list="list"
    :data="formData"
    style="width: 1000px"
    :column="2"
    :config="{ labelWidth: 200, labelPosition: 'left', showMessage: false }"
  >
  </MForm>
  <button @click="xxxxx">asdfasdf</button>
  <MDrawer v-model:isShow="isShowApiDrawer" title="测试">
    <template #header>
      <div>121233</div>
    </template>
  </MDrawer>
  <button @click="isShowApiDrawer = true">openDrawer</button>
  <hr />
  <hr />

  <MVirtualizedTable
    :data="[]"
    :columns="columns"
    :width="700"
    :loading="loading"
    :height="300"
    ref="virtualizedTableRef"
    :config="myVirtualizedTableConfig"
    @renderFinish="renderFinish"
  />

  <hr />
</template>
<script setup lang="ts">
import { TableV2Props } from 'element-plus';
import { Ref, computed, isReactive, isRef, onMounted, ref, toRefs, watch, watchEffect } from 'vue';

import { MVirtualizedTableProps } from '../src/components/VirtualizedTable.vue';
import { useRowSpan } from '../src/hook/useRowSpan';
import { IForm, ITableColumn, MDrawer, MForm, MSearchForm, MTable, MVirtualizedTable, useDateSelectDisabled } from '../src/index';

const virtualizedTableRef = ref<InstanceType<typeof MVirtualizedTable> | null>(null);
const isShowApiDrawer = ref(false);
const column: ITableColumn[] = [{ label: 'xxx', prop: 'xxx' }];
const data = ref([]);
const list: IForm[] = [
  { label: '客户名称', prop: 'customerName', type: 'input', column: 2 },
  { label: '客户简称', prop: 'customerAbbreviation', type: 'input' },
  {
    label: '是否为售电公司',
    prop: 'isCompany',
    type: 'radioGroup',
    selectOption: {
      options: [
        { label: '是', value: 1 },
        { label: '否', value: 0 },
      ],
    },
  },
  { label: '行业', prop: 'industryInvolved', type: 'text', option: { textRender: () => 'dasfasdf' } },

  { label: '户号', prop: 'accountNumber', type: 'input', option: {} },
  { label: '变压器容量(MVA)', prop: 'capacity', type: 'number' },
  { label: '电压等级(kV)', prop: 'voltageGrade', type: 'input', option: { clearable: true } },
  { label: '合约文件', prop: 'file', type: 'singleUpload', option: {} },
];

const formData = ref({ date: ['2025-09-09', '2025-09-09'] });
const loading = ref(true);
const xxxxx = () => {
  console.log(formData.value);
};

const search = (data: any) => {
  console.log('search', data);
};

const renderFinish = () => {
  loading.value = false;
};
setTimeout(() => {
  loading.value = false;
}, 3000);

// const columns = generateColumns(10);
const columns: TableV2Props['columns'] = [
  {
    width: 100,
    dataKey: 'infoDate',
    title: '交易日期',
    // fixed: true,
    key: 'infoDate',
  },
  {
    width: 180,
    dataKey: 'customerName',
    title: '客户名称',
    key: 'customerName',
    // rowSpan: useRowSpan(datas, 'customerName'),
  },
];
// columns[0].rowSpan = ({ rowIndex }) => {
//   return rowIndex % 2 === 0 && rowIndex <= datas.length - 2 ? 2 : 1;
// };

const myVirtualizedTableConfig: MVirtualizedTableProps = {
  // 其他可选属性可根据实际需求补充
  fixed: true,
};
interface ISelectApiTree {
  values: string;
  labels: string;
  children?: ISelectApiTree[];
}
const apiTreeSelect = (): Promise<ISelectApiTree[]> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve([
        {
          values: '1',
          labels: 'Level one 1',
          children: [
            {
              values: '1-1',
              labels: 'Level two 1-1',
              children: [
                {
                  values: '1-1-1',
                  labels: 'Level three 1-1-1',
                },
              ],
            },
          ],
        },
      ]);
    }, 3000);
  });
};

const apiSelect = (): Promise<ISelectApi[]> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve([
        { label: 'test', value: 'test' },
        { label: 'test2', value: 'test2' },
      ]);
    }, 3000);
  });
};

interface ISelectApi {
  label: string;
  value: string;
}

const disabledDate = useDateSelectDisabled('2024-07-07', '2025-07-09', 10);
const searchList: IForm[] = [
  {
    label: '日期',
    prop: 'date',
    type: 'datePicker',
    option: { type: 'daterange', valueFormat: 'YYYY-MM-DD', style: { width: '250px' }, ...disabledDate },
  },
  { label: '变压器容量(MVA)', prop: 'capacity', type: 'number' },
  {
    label: '测试apiselect',
    prop: 'apiSelect',
    type: 'select',
    option: {
      api: apiSelect,
      formatterFn: (data) => {
        return data.map((item) => ({
          label: item.label,
          value: item.value,
        }));
      },
    },
  },
  {
    label: '测试apiTreeSelect',
    prop: 'apiTreeSelect',
    type: 'treeSelect',
    option: {
      filterable: true,
      api: apiTreeSelect,
      props: {
        label: 'labels',
        value: 'values',
      },
      loadingText: '加载中...',
    },
  },
];
</script>

<style></style>
